import { useEffect, useState } from 'react'

function Son() {
	useEffect(() => {
		// 组件挂载时自动执行
		let timer = setInterval(() => {
			console.log('useEffect副作用')
		}, 1000)

		// 组件卸载时自动执行
		return () => {
			clearInterval(timer)
			timer = null
			console.log('清除副作用')
		}
	}, [])

	return <h2>我是Son组件</h2>
}

function UseEffect() {
	const [show, setShow] = useState(true)

	return (
		<>
			<h2>UseEffect清除副作用</h2>
			<hr />

			{show && <Son />}
			<button onClick={() => setShow(false)}>销毁Son</button>
		</>
	)
}

export default UseEffect
